<template>
    <div class="login_center" >
        {{tableData}}
        <!--                :header-cell-style="{'text-align':'center'}"-->
        <el-table
                :data="tableData"
                :span-method="objectSpanMethod"
                :header-cell-style="headerMethod"
                :cell-style="{'text-align':'center'}"
                style="width: 100%">
            <el-table-column
                    prop="countyName"
                    label="区县"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="siteName"
                    label="站点"
                    width="120">
            </el-table-column>
            <el-table-column :label="dynamicLabel.x">
                <el-table-column
                        prop="pm25"
                        label="PM2.5">
                </el-table-column>
                <el-table-column
                        prop="pm10"
                        label="PM10">
                </el-table-column>
                <el-table-column
                        prop="no2"
                        label="NO2">
                </el-table-column>
                <el-table-column
                        prop="co"
                        label="CO">
                </el-table-column>
                <el-table-column
                        prop="aqi"
                        label="AQI">
                </el-table-column>
                <el-table-column
                        prop="pp"
                        label="首污">
                </el-table-column>
            </el-table-column>
            <el-table-column :label="dynamicLabel.y">
                <el-table-column
                        prop="aqic"
                        label="AQI">
                </el-table-column>
                <el-table-column label="首污及浓度">
                    <el-table-column
                            prop="ppc">
                    </el-table-column>
                    <el-table-column
                            prop="ppcv">
                    </el-table-column>
                </el-table-column>
            </el-table-column>
            <el-table-column label="后续控制均值">
                <el-table-column
                        prop="city"
                        label="PM2.5">
                </el-table-column>
                <el-table-column
                        prop="city"
                        label="PM10">
                </el-table-column>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    module.exports = {
        name: "table-component",
        props: {
            dynamicLabel: {
                x: '121',
                y: '121'
            },
            data: {
                type: Array
            }
        },
        created() {
            this.getData()
        },
        data () {
            return {
                tableData: this.data
            }
        },
        methods: {
            objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                if (columnIndex === 0) {
                    if (rowIndex === 0) {
                        return {
                            rowspan: 10,
                            colspan: 1
                        };
                    } else {
                        return {
                            rowspan: 0,
                            colspan: 1
                        };
                    }
                }
            },
            headerMethod({ row, column, rowIndex, columnIndex }) {
                const comStyle = { background: '#b1defd', color: '#606266', fontWeight: '800', textAlign: 'center' };
                // 1.1 让第0行的第0列跨2行
                if (rowIndex === 1 && columnIndex === 7) {
                    this.$nextTick(() => {
                        document
                            .getElementsByClassName(column.id)[0]
                            .setAttribute("rowSpan", 2);
                        return comStyle;
                    });
                }
                // 1.2 被覆盖的进行隐藏
                if (rowIndex === 2 && (columnIndex == 7 || columnIndex == 8)) {
                    return {
                        display: "none",
                        ...comStyle,
                    };
                }
                return comStyle;
            },
            // mergeCol(id, rowIndex) { // 合并单元格
            //     // id：属性名
            //     // rowIndex：行索引值
            //     var idName = this.tableData[rowIndex][id] // 获取当前单元格的值
            //     if (rowIndex > 0) { // 判断是不是第一行
            //         // eslint-disable-next-line eqeqeq
            //         if (this.tableData[rowIndex][id] != this.tableData[rowIndex - 1][id]) { // 先判断当前单元格的值是不是和上一行的值相等
            //             var i = rowIndex; var num = 0 // 定义一个变量i，用于记录行索引值并进行循环，num用于计数
            //             while (i < this.tableData.length) { // 当索引值小于table的数组长度时，循环执行
            //                 if (this.tableData[i][id] === idName) { // 判断循环的单元格的值是不是和当前行的值相等
            //                     i++ // 如果相等，则索引值加1
            //                     num++ // 合并的num计数加1
            //                 } else {
            //                     i = this.tableData.length // 如果不相等，将索引值设置为table的数组长度，跳出循环
            //                 }
            //             }
            //             return {
            //                 rowspan: num, // 最终将合并的行数返回
            //                 colspan: 1
            //             }
            //         } else {
            //             return {
            //                 rowspan: 0, // 如果相等，则将rowspan设置为0
            //                 colspan: 1
            //             }
            //         }
            //     } else { // 如果是第一行，则直接返回
            //         let i = rowIndex; let num = 0
            //         while (i < this.tableData.length) { // 当索引值小于table的数组长度时，循环执行
            //             if (this.tableData[i][id] === idName) {
            //                 i++
            //                 num++
            //             } else {
            //                 i = this.tableData.length
            //             }
            //         }
            //         return {
            //             rowspan: num,
            //             colspan: 1
            //         }
            //     }
            // },
        },
    }
</script>

<style>
    .hello {
        background-color: #ffe;
    }
</style>